<template>
  <div class="app-container-flex">
    <NewFullScreen
      v-model="showDialog"
      :title="title"
      @returnBack="$emit('returnModify')"
    >
      <template v-slot:full-button>
        <el-button @click="save()">保存</el-button>
      </template>
      <div class="model-panel">
        <div class="model-panel-title">
          <p>{{ $t('basic_information') }}</p>
        </div>
        <div class="model-panel-body">
          <!-- form -->
          <page-form
            class="paddingBox order-model-formBox flex_wrap_start_start"
            v-model:ref-obj="formInfo.ref"
            :disabled="formInfo.disabled"
            :data="formInfo.data"
            :field-list="formInfo.fieldList"
            :rules="formInfo.rules"
            :label-width="formInfo.labelWidth"
          >
          <template v-slot:form-deptName>
                <el-input
                  v-model="formInfo.data.deptName"
                  class="not-mongolia"
                  type="input"
                  :disabled="true"
                  placeholder="请选择部门"
                >
                  <template #append>
                    <el-icon @click="openDeptWindow"><Search /></el-icon>
                  </template>
                </el-input>
              </template>
          </page-form>
        </div>
      </div>

      <div class="model-panel">
        <div class="model-panel-title">
          <Tooltip text="养护项目" />
        </div>
        <div class="model-panel-body">
          <!-- 条件栏 -->
          <NewPageFilter
            v-model:query="filterInfo.query"
            :filter-btn="filterInfo.list"
          >
            <template v-slot:filter-remove>
              <el-button
                :disabled="!tableInfo.selections.length"
                @click="remove()"
                >删除项目</el-button
              >
            </template>
          </NewPageFilter>
          <div class="flex_full_item">
            <el-form :model="tableInfo" ref="tableForm" style="width: 100%">
              <!-- 表格 -->
              <page-table
                :refresh="tableInfo.refresh"
                :init-curpage="tableInfo.initCurpage"
                v-model:data="tableInfo.data"
                :pager="false"
                :tabIndex="true"
                :field-list="tableInfo.fieldList"
                :handle="tableInfo.handle"
                @handleEvent="handleEvent"
              >
                <template v-slot:col-maintenanceParts="scope">
                  <el-form-item
                    class="form-input"
                    :prop="`data.${scope.$index}.maintenanceParts`"
                    :rules="[
                      {
                        required: scope.$index > -1,
                        message: '请输入养护部位',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-input v-model="scope.row.maintenanceParts"> </el-input>
                  </el-form-item>
                </template>
                <template v-slot:col-contentRequire="scope">
                  <el-form-item
                    class="form-input"
                    :prop="`data.${scope.$index}.contentRequire`"
                    :rules="[
                      {
                        required: scope.$index > -1,
                        message: '请输入养护内容与要求',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <el-input v-model="scope.row.contentRequire"> </el-input>
                  </el-form-item>
                </template>
              </page-table>
            </el-form>
          </div>
        </div>
      </div>
    </NewFullScreen>
    <!--部门选择框-->
    <SelectDept
      v-if="selectDeptInfo.visible"
      v-model:show-dialog="selectDeptInfo.visible"
      :check-box="false"
      :highlight-row="true"
      :query="selectDeptInfo.query"
      :save-empty="true"
      @callback="selectDeptCallback"
    />
  </div>
</template>

<script setup>
import {
  createDeviceMaintenanceTemplate,
  updateDeviceMaintenanceTemplate,
  getDeviceMaintenanceTemplateById,
} from '@/api/device'
const { proxy } = getCurrentInstance()
const emit = defineEmits()
const props = defineProps(['visible', 'title', 'id', 'type'])

const formRefs = ref([])
const formInfo = ref({
  ref: null,
  data: {
    status: 0,
    remind: 1,
    remindTask: 1,
  },
  fieldList: [
    {
      label: '模板名称',
      value: 'name',
      type: 'input',
      require: true,
      disabled: false,
    },
    {
      label: '部门',
      value: 'deptName',
      type: 'slot',
      require: true,
      disabled: false,
    },
    {
      label: '备注',
      value: 'remark',
      type: 'textarea',
    },
  ],
  rules: {
    name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
    deptName: [{ required: true, message: '请选择部门', trigger: 'change' }],
  },
  labelWidth: '120px',
})
// 养护资产过滤相关配置
const filterInfo = ref({
  query: {
    id: props.id,
  },
  list: [
    { label: '添加项目', type: 'button', event: addProduct },
    { type: 'slot', value: 'remove' },
  ],
})
// 养护资产表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  selections: [],
  fieldList: [
    {
      label: '养护部位',
      value: 'maintenanceParts',
      type: 'slot',
    },
    {
      label: '养护内容与要求',
      value: 'contentRequire',
      type: 'slot',
    },
    {
      label: '备注',
      value: 'remark',
      type: 'input',
    },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [
      {
        label: '删除',
        event: remove,
        popconfirmText: '删除后将改变数据,是否继续？',
        show: true,
      },
    ],
  },
})
const selectDeptInfo = ref({
  visible: false,
  query: {
    deptAuth: 'id',
    status: 1,
    useDeptId: '',
  },
})
const showDialog = computed({
  get() {
    return props.visible
  },
  set(newValue) {
    emit('update:visible', newValue) // 更新父组件visible
  },
})

onMounted(() => {
  formRefs.value = [proxy.$refs['tableForm'], formInfo.value.ref]
  if(props.id) {
    getMain()
  }
})

function openDeptWindow() {
  selectDeptInfo.value.visible = true
}
function selectDeptCallback(row) {
  if (row && row.id) {
    formInfo.value.data['deptName'] = row.name
    formInfo.value.data['deptId'] = row.id
  } else {
    formInfo.value.data['deptName'] = ''
    formInfo.value.data['deptId'] = ''
  }
}
//添加项目
function addProduct() {
  tableInfo.value.data.push({})
}
//删除资产
function remove(row = undefined) {
  if (row) {
    tableInfo.value.data = tableInfo.value.data.filter((item) => item !== row)
  } else {
    proxy
      .$confirm('删除后将改变数据,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        tableInfo.value.data = tableInfo.value.data.filter((row) => {
          return !tableInfo.value.selections.includes(row)
        })
      })
  }
}
function getMain() {
  getDeviceMaintenanceTemplateById(props.id).then((resp) => {
    if (resp && resp.success) {
      formInfo.value.data = resp.data
      tableInfo.value.data = resp.data.programList || []
    }
  })
}
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.value.selections = data
      break
  }
}
//保存
function save() {
  if (!tableInfo.value.data.length) {
    proxy.$message.warning('请添加养护项目')
    returu
  }
  proxy.$fn.checkForm(formRefs.value).then(() => {
    const data = formInfo.value.data
    data.programList = tableInfo.value.data
    if(props.type === 'copy') {
      data.id = ''
    }
    const api = data.id
      ? updateDeviceMaintenanceTemplate
      : createDeviceMaintenanceTemplate
    api(data).then((resp) => {
      if (resp && resp.success) {
        showDialog.value = false
        emit('returnModify')
      }
    })
  })
}
</script>

<style scoped></style>
